<template>
    <!-- 商品汇总 -->
    <div class="summarys-item-page" v-loading="loading">
        <el-radio-group v-model="check.list" :min="1" @change="handleChecked">
            <el-radio
                v-for="v in check.data"
                :label="v.goodsName"
                :key="v.goodsName"
            />
        </el-radio-group>
        <Table
            :list="tableData"
            :params="params"
            :span-method="objectSpanMethod"
            :sort="false"
            height="80vh"
            ref="Table"
            v-show="!loading"
        >
            <el-table-column :label="check.list" label-class-name="check-name" fixed="left" width="200">
                <el-table-column
                    prop="brandName"
                    width="100"
                    class-name="brand-name"
                     fixed="left"
                />
                <el-table-column
                    prop="plyAndWidth"
                    width="100"
                    class-name="brand-name"
                    fixed="left"
                />
            </el-table-column>

            <template v-for="(warehouse, key) in warehouseCount">
                <el-table-column
                    :label="key"
                    :key="key"
                    label-class-name="table-header-column"
                >
                    <template v-for="v in warehouse">
                        <el-table-column
                            :label="v.warehouse"
                            :key="v.warehouseId"
                            :prop="v.warehouseId"
                            min-width="200"
                            label-class-name="table-header-column"
                        >
                            <template slot-scope="scope">
                                <span>{{
                                    scope.row[
                                        `${scope.row.plyAndWidth}_${v.warehouseId}`
                                    ]
                                }}</span>
                            </template>
                        </el-table-column>
                    </template>
                </el-table-column>
            </template>
        </Table>
    </div>
</template>

<script>
export default {
    data: () => {
        return {
            params: {},
            check: {
                // 可选菜单
                data: [],
                // 已选
                list: "",
            },
            goodsCount: {},
            warehouseCount: {},
            tableData: [],
            loading: true,
        };
    },
    created() {
        this.$store.dispatch("getEnum", "goodsName").then((data) => {
            let name = data[0].goodsName;
            this.check.data = data;
            this.check.list = name;
            this.handleChecked(name);
        });
    },
    methods: {
        // 获取商品明细
        getGoodsCount() {
            let { params } = this;
            return this.$Api.storage.gcount.goods(params).then((res) => {
                this.goodsCount = res.data;
            });
        },
        // 获取仓库信息
        getWarehouseCount() {
            let { params } = this;
            return this.$Api.storage.gcount.warehouse(params).then((res) => {
                this.warehouseCount = res.data;
            });
        },
        handleChecked(checked) {
            this.loading = true;
            this.params.goodsName = checked;
            this.$nextTick(() => {
                Promise.all([
                    this.getGoodsCount(),
                    this.getWarehouseCount(),
                ]).then((res) => {
                    this.fomatData();
                });
            });
        },
        fomatData() {
            let tableData = [];
            let { goodsCount, warehouseCount } = this;
            let { Table } = this.$refs;

            for (let k in goodsCount) {
                let d = goodsCount[k];
                let i = 0;

                d.forEach((v) => {
                    v[`${v.plyAndWidth}_${v.warehouseId}`] = v.total;
                    v.brandNameTop = k;
                    i == 0 && (v.brandNameTopLength = d.length);
                    tableData.push(v);
                    i++;
                });
            }

            this.tableData = tableData;

            this.$nextTick(() => {
                setTimeout(() => {
                    this.loading = false;
                }, 1000);

                console.log(Table);
                Table.find;
            });
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                let i = 0;

                if (row.brandNameTopLength) {
                    return {
                        rowspan: row.brandNameTopLength,
                        colspan: 1,
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0,
                    };
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep.summarys-item-page {
    padding: 20px;
    min-height: 100vh;
    .el-radio-group {
        .el-radio {
            margin: 0 30px 20px 0;
        }
    }

    .table-com {
        position: relative;
        .table-check-name {
            position: absolute;
            top: 1px;
            left: 1px;
            width: 198px;
            height: 86px;
            background: #fff;
            color: #666;
        }

        .table-header-column {
            background: #77c2ff;
            color: #fff;
        }

        thead {
            position: relative;
            th {
                position: static;
                .cell.check-name {
                    position: absolute;
                    left: 1px;
                    top: 1px;
                    z-index: 100;
                    width: 198px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #fff;
                }
            }
        }
        tbody {
            .brand-name {
                background: #32be71;
                color: #fff;
            }
        }
    }
}
</style>